//采用异步fetch方法从数据库中获取历史指令队列数据
/**
 * 获取历史指令队列数据
 * @param {number} id:可选参数，指令队列id 
 * @returns 获取的数据
 */
async function getHistoryQueueData(id) {
    if (id) {
        var url = "http://139.159.253.19:5010/get_queue?id=" + id;
    } else if (!id) {
        var url = "http://139.159.253.19:5010/get_queue"
    }

    // console.log(url);
    const res_data = await fetch(url, {
        method: 'GET',



    });
    const data = await res_data.json();
    return data;
}
//根据id获取支路数据
//根据mainid获取数据(支路)函数
/**
 * 
 * @param {dom} container 容器，一般是ul
 * @param {number} id 数据库中的id以及html中的data-mainid
 */
function getHistoryQueueDataById(container, id) {
    getHistoryQueueData(id).then(function (data) {
        var queue_json = JSON.parse(data[0].queue_json);
        //转换为数组
        queue_json = Object.values(queue_json);
        //用map函数填充内容
        container.innerHTML = queue_json.map((item) => {
            return ` 
                    <li class="history-queue-content-item history-queue-state-${item.itemstate}" data-itemstate="${item.itemstate}" data-instruction="${item.instruction}" data-type="${item.type}">${map_data[item.type][item.instruction].popup}</li>
                `

        }).join('');
        //这里不要渲染

    })
    //不要渲染
}


//弹窗宽度=左侧导航栏宽度
var UIWidth = document.querySelector("#big-left-li").offsetWidth + "px";

//监听界面变化
window.onresize = function () {
    UIWidth = document.querySelector("#big-left-li").offsetWidth + "px";

    //函数重载

}
layui.use(function () {
    var layer = layui.layer;
    var util = layui.util;
    var $ = layui.$;

    // 事件
    util.on('lay-on', {
        'test-offset-t': function () {
            layer.open({
                type: 1,
                offset: 't',
                anim: 'slideDown', // 从上往下
                area: ['100%', '160px'],
                shade: 0.1,
                shadeClose: true,
                id: 'ID-demo-layer-direction-t',
                content: '<div style="padding: 16px;">任意 HTML 内容</div>'
            });
        },
        'test-offset-r': function () {
            layer.open({
                type: 1,
                offset: 'r',
                anim: 'slideLeft', // 从右往左
                area: ['320px', '100%'],
                shade: 0.1,
                shadeClose: true,
                id: 'ID-demo-layer-direction-r',
                content: '<div style="padding: 16px;">任意 HTML 内容</div>'
            });
        },
        'test-offset-b': function () {
            layer.open({
                type: 1,
                offset: 'b',
                anim: 'slideUp', // 从下往上
                area: ['100%', '160px'],
                shade: 0.1,
                shadeClose: true,
                id: 'ID-demo-layer-direction-b',
                content: '<div style="padding: 16px;">任意 HTML 内容</div>'
            });
        },
        'test-offset-l': function () {
            var index = layer.open({
                type: 1,
                title: '历史记录',
                offset: 'l',
                anim: 'slideRight', // 从左往右
                area: [UIWidth, '100%'],
                shade: 0.1,
                shadeClose: true,
                id: 'Layer-Left-History',
                content: '',
                //关闭弹窗后执行
                end: function () {
                    //清除地图上的所有标记
                    mapClearAll();
                }
            });
            //添加内容
            document.getElementById("Layer-Left-History").innerHTML = `
                <div class="layui-collapse" lay-accordion>
                    <div class="layui-colla-item" id="queue-history">
                         <div class="layui-colla-title">指令队列</div>
                            <div class="layui-colla-content">
                            </div>
                        </div>
                    </div>
                </div>
    `
            //渲染(必须执行否则无法获取元素，这是为了等待dom加载完成)
            layui.element.render();
            // console.log("渲染完成");
            //填充内容(主支路)=>填充内容(支路)=>监听事件
            getHistoryQueueData().then(function (data) {
                // console.log(data);
                //获取历史记录容器
                var HistoryBox = document.querySelector("#queue-history .layui-colla-content");
                //
                HistoryBox.innerHTML = data.map((queue) => {
                    //遍历queue.queue_json
                    queue.queue_json = JSON.parse(queue.queue_json);
                    queue.queue_json = Object.values(queue.queue_json)
                    // console.log(queue.queue_json);

                    return ` 
                        <div class="layui-collapse" lay-accordion>
                            <div class="layui-colla-item">
    
                                <!-- 指令标题 -->
                                <div class="layui-colla-title queue-history" data-mainid=${queue.id}>
                                    <span>
                                        <span></span>
                                        <span data-description="history-queue-floor">${queue.floor}层</span>
                                    </span>
                                    <span>
                                        <span>时间:</span>
                                        <span data-description="history-queue-time">${queue.sent_time}</span>
                                    </span>
                                    <span class="history-queue-mainstate ${queue.mainstate=="finished"?"history-queue-mainstate-finished":"history-queue-mainstate-unfinished"}">
                                        <i class="layui-icon layui-icon-success" style="font-size:24px;color:green"></i>
                                    </span>
    
                                </div>
                                <!-- 指令内容 -->
                                <div class="layui-colla-content history-queue-content-box">
                                    <ul class="history-queue-content"></ul>
                                </div>
                            
                            </div>
    
                        </div>`
                }).join('');
                //渲染(必须执行否则无法获取元素，这是为了等待dom加载完成)

                layui.element.render();
                //把代码放.then里面是为了等待异步函数加载完成，否则无法获取元素

                //监听.queue-history的点击事件
                //等待dom加载完成(必须执行否则无法获取元素)

                var queueHistory = document.querySelectorAll("#queue-history .queue-history");

                //装li的容器
                var queueContentBox = document.querySelectorAll("#queue-history .history-queue-content-box ul");
                // console.log("下面是装li的容器");
                // console.log(queueContentBox);

                //遍历并添加监听事件
                for (var i = 0; i < queueHistory.length; i++) {
                    queueHistory[i].addEventListener("click", function () {
                        //判断是否隐藏
                        //如果class属性中没有layui-show则隐藏
                        if (!this.nextElementSibling.classList.contains("layui-show")) {
                            // console.log("隐藏");
                            // this.nextElementSibling.style.display = "none";
                            //清除地图上的所有标记
                            mapClearAll();
                        } else {
                            // console.log("显示");
                            // 先关闭所有其他项的弹窗:通过删除class属性中的layui-show
                            // for (var j = 0; j < queueContentBox.length; j++) {
                            //     queueContentBox[j].parentNode.classList.remove("layui-show");

                            // }


                            //再把当前项的弹窗显示出来
                            this.nextElementSibling.classList.add("layui-show");

                            // this.nextElementSibling.style.display = "block";
                            //清空发送台
                            removeActive1();
                            //清除地图上的所有标记
                            mapClearAll();
                            //根据id从后端数据库获取地图数据并连线
                            //获取id
                            var mainId = this.getAttribute("data-mainid");

                            //根据id获取支路数据
                            getHistoryQueueDataById(this.nextElementSibling.querySelector("ul"), mainId);
                            var queueContent_ul = this.nextElementSibling.querySelector("ul");

                            //根据id获取queue_json
                            getHistoryQueueData(mainId).then(function (data) {
                                //获取queue_json
                                var queue_json = JSON.parse(data[0].queue_json);
                                // console.log(queue_json);
                                //画线
                                drawMap(queue_json)
                                //监听ul中的li点击事件

                                queueContent_ul.addEventListener("click", function (e) {
                                    var target = e.target;
                                    var queue_type = target.getAttribute("data-type");
                                    var queue_instruction = target.getAttribute("data-instruction");

                                    //地图图标显示popup信息
                                    map_data[queue_type][queue_instruction].marker.openPopup();
                                })



                            });


                        }
                    });
                };




            });













        }


    });


});